<template>
  <div
    class="produ item-over sha1"
    @mouseenter="mouseenter2Show"
    @mouseleave="mouseleave2Hide"
  >
    <div class="produ-preshow">
      <div class="pre-pic">
        <div class="pre-pic-bg">
          <img class="blur" :src="item.thumb" alt="" />
        </div>
        <div class="pre-pic-shadow"></div>
        <div class="pre-pic-img">
          <img :src="item.thumb" alt="" />
        </div>
        <div v-show="bIsOver" class="pre-pic-btn item-show">
          <el-row style="display: block; margin-top: 40%; text-align: center">
            <el-button class="pre-pic-btn-cls" @click.stop="onPreview">预览</el-button>
            <el-button class="pre-pic-btn-cls" @click.stop="onEnterEdit">编辑</el-button>
          </el-row>
        </div>
        <div v-if="bIsQr" class="pre-pic-qr item-show">
          <img
            :data-src="item.qr_code"
            src="https://static.hd.xxx.com/upload/biz/1/411660.gif"
            alt=""
            @load.once="handleImgLoad($event)"
          />
        </div>
      </div>
    </div>

    <div class="produ-handle" :class="bIsHandleShow ? 'produ-handle-active' : ''">
      <div class="produ-handle-title">
        <p class="txt_ellipsis" :title="item.name">
          ({{ item.site_id }}) {{ item.name }}
        </p>
      </div>
      <div class="produ-handle-type">
        <p>
          <span>{{ item.type }}</span>
          <b>{{ item.update_time }}</b>
        </p>
      </div>
      <div v-show="bIsOver" class="produ-handle-btn">
        <div
          class="handle-btn-qr"
          :class="bIsQr ? 'handle-btn-qr-active' : ''"
          @mouseenter="bIsQr = !bIsQr"
          @mouseleave="bIsQr = !bIsQr"
        >
          <el-icon><View /></el-icon>
        </div>

        <div
          class="handle-btn-others"
          :class="bIsOthers ? 'handle-btn-others-active' : ''"
          @mouseenter="bIsOthers = !bIsOthers"
          @mouseleave="bIsOthers = !bIsOthers"
        >
          <el-row>
            <el-button size="small" class="btn-oth">操作</el-button>
          </el-row>

          <div v-show="bIsOthers" class="btn-others-box item-show sha0">
            <el-col type="flex" align="top" style="padding: 0; min-width: 60px">
              <el-button
                v-if="bIsDetailDataBtnShow"
                type="text"
                class="btn-others"
                @click.stop="click2DetailData(item)"
                ><i class="jy-icon-statistics"></i>数据</el-button
              >
              <el-button
                v-if="bIsOnlineBtnShow && item.status == 2"
                :disabled="!item.status"
                type="text"
                class="btn-others"
                @click.stop="click2Online('1')"
                ><i class="jy-icon-post"></i>上线</el-button
              >
              <el-button
                v-if="bIsOnlineBtnShow && item.status == 1"
                :disabled="!item.status"
                type="text"
                class="btn-others"
                @click.stop="click2Online('2')"
                ><i class="jy-icon-offline"></i>下线</el-button
              >
              <el-button
                v-if="bIsDeleteBtnShow"
                type="text"
                class="btn-others btn-line"
                @click.stop="click2Delete"
                ><i class="jy-icon-delete"></i>删除</el-button
              >
              <el-button
                v-if="bIsCopySiteBtnShow"
                type="text"
                class="btn-others"
                @click.stop="click2CopySite"
                ><i class="jy-icon-copy"></i>拷贝站点</el-button
              >
              <el-button
                v-if="bIsTurnTempBtnShow && item.h5Type != H5_TYPE.card"
                type="text"
                class="btn-others btn-line"
                @click.stop="click2Turn"
                ><i class="jy-icon-template"></i>转作模版</el-button
              >
              <el-button
                v-if="bIsTurnSiteBtnShow"
                type="text"
                class="btn-others"
                @click.stop="click2Turn"
                ><i class="jy-icon-copy"></i>创建站点</el-button
              >
            </el-col>

            <div class="inverted-tri sha3"></div>
          </div>
        </div>
      </div>

      <!-- v-if="bIsTagShow" -->
      <div class="produ-tag">
        <!-- :isBtnShow="produType == 'ADMINPRODU'" -->
        <ProduTags
          :item="item"
          :isBtnShow="
            produType == 'ADMINPRODU' || (produType == 'ADMINTEMP' && group == 1)
          "
        >
        </ProduTags>
      </div>
    </div>

    <div class="produ-status" :class="{ 'is-online': item.status == 1 }">
      <p>{{ item.status == 1 ? "已发布" : "未发布" }}</p>
    </div>
  </div>
</template>

<script>
import ProduTags from "@/views/child/admin/common/tag/produ-tags.vue";
import { H5_TYPE } from "@/const";
import { EventBus } from "@/utils";
import { reactive } from "vue";
import { useWebUserStore } from "@/store/web/user";
import { useWebSiteStore } from "@/store/web/site";
import { useWebCardCompStore } from "@/store/web/card-component";
const useWebUser = useWebUserStore();
const useWebSite = useWebSiteStore();
const useWebCardComp = useWebCardCompStore();
export default {
  setup() {
    const state = reactive({
      bIsOver: false,
      bIsHandleShow: false,
      bIsQr: false,
      bIsOthers: false,
    });
    const state_ = {
      H5_TYPE: H5_TYPE,
      overTimer: null,
    };
    _.merge(state, state_);
    return state;
  },
  props: {
    item: Object,//IWebSiteItem
    produType: String, // ADMINPRODU/ADMINTEMP
  },
  computed: {
    group() {
      return useWebUser.user.group;
    },
    /* 操作按钮 */
    bIsDetailDataBtnShow() {
      // 数据
      if (this.produType == "ADMINPRODU") return true;
      return false;
    },
    bIsOnlineBtnShow() {
      // 上/下线
      if (this.produType == "ADMINPRODU") return true;
      if (this.produType == "ADMINTEMP") return this.group == 1;
      return false;
    },
    bIsDeleteBtnShow() {
      // 删除
      if (this.produType == "ADMINPRODU") return true;
      if (this.produType == "ADMINTEMP") return this.group == 1;
      return false;
    },
    bIsCopySiteBtnShow() {
      // 拷贝站点
      if (this.produType == "ADMINPRODU") return true;
      return false;
    },
    bIsTurnTempBtnShow() {
      // 转作模版
      if (this.produType == "ADMINPRODU") return this.group == 1;
      return false;
    },
    bIsTurnSiteBtnShow() {
      // 创建站点
      if (this.produType == "ADMINTEMP") return true;
      return false;
    },
  },
  components: {
    ProduTags,
  },
  methods: {
    async onPreview() {
      // 1. card
      if (this.item.h5Type == 4) {
        await useWebCardComp.getCardSite({ id: this.item.site_id });
        await useWebCardComp.getCardSitePreshow({ id: this.item.site_id });
        useWebCardComp.updateMgSitePreview({ isActive: true });
      }
      // 2. 非 card: h5 canvas pc
      else {
        useWebSite.setSitePreview({ isEditSite: false });
        useWebSite.getSiteDatas({ item: this.item, isTempPreviewUrl: true });
      }
    },
    onEnterEdit() {
      // this.$store.dispatch("components/getPageDatas", {id: this.item.site_id, $router: this.$router});
      if (this.item.h5Type == 4)
        this.$router.push({ name: "cardedit", params: { id: this.item.site_id } });
      else this.$router.push({ path: `/h5edit/${this.item.site_id}` });
    },
    mouseenter2Show() {
      let that = this;
      that.bIsHandleShow = true;
      if (that.overTimer) clearTimeout(that.overTimer);
      that.overTimer = setTimeout(function () {
        that.bIsOver = true;
        if (that.overTimer) clearTimeout(that.overTimer);
      }, 300);
    },
    mouseleave2Hide() {
      let that = this;
      // console.log("produ-leave: ", el);

      if (that.overTimer) clearTimeout(that.overTimer);
      this.bIsOver = false;
      this.bIsHandleShow = false;
      this.bIsQr = false;
      this.bIsOthers = false;
    },
    click2DetailData(item) {
      // this.$router.push('/admin/data')
      EventBus.$emit("changeAdminTab", { type: "ADMINDATA", site_id: item.site_id });
    },
    click2Online(onlineType) {
      let params = {
        online: onlineType, // online 2-下线，1-上线
        site_id: this.item.site_id,
      };
      if (this.produType == "ADMINPRODU") useWebUser.onlineSite(params);
      if (this.produType == "ADMINTEMP") useWebUser.onlineTemp(params);
    },
    click2Delete() {
      if (this.produType == "ADMINPRODU")
        useWebSite.updateDeleteSiteData({ isDelete: true, site_id: this.item.site_id });
      if (this.produType == "ADMINTEMP")
        useWebUser.handleDeleteTemp({ site_id: this.item.site_id });
    },
    click2CopySite() {
      useWebSite.getSiteDatas({
        item: this.item,
        callback: (siteData) => {
          const type = siteData.attrs.h5Type;
          if (type == H5_TYPE.card) useWebCardComp.createCopySite({ type, $router: this.$router, siteData });
          else useWebSite.createSite({ type, $router: this.$router, siteData });
        },
        isTempPreviewUrl: true,
      });
    },
    click2Turn() {
      // 需要管理员权限
      // 复制站点为模版
      if (this.produType == "ADMINPRODU")
        useWebUser.handleTurnTemp({ site_id: this.item.site_id });
      if (this.produType == "ADMINTEMP")
        useWebUser.handleTurnSite({ site_id: this.item.site_id });
    },
    handleImgLoad(e) {
      const targetImg = e.target;
      const dataSrc = e.target.getAttribute("data-src");
      const image = new Image();
      image.src = dataSrc;
      image.onload = function () {
        targetImg.src = dataSrc;
      };
      image.onerror = function () {
        targetImg.src = "//static.hd.xxx.com/upload/biz/1/596882.png";
      };
    },
  },
  beforeUnmount() {
    // overTimer
    if (this.overTimer) clearTimeout(this.overTimer);
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/common.scss";

/**************produ***************/
.produ {
  position: relative;
  width: 242px;
  height: 320px;

  background: #fff;
}

.produ-preshow {
  position: relative;
  height: 238px;

  background: #aaa;
  z-index: 1;

  .pre-pic-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .pre-pic-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
  }

  .pre-pic-img {
    position: relative;
    margin: 0 auto;
    padding-top: 6px;
    width: 140px;
    height: 226px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .pre-pic-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // display: flex;
    // justify-content: center;
    background: rgba(0, 0, 0, 0.5);

    .pre-pic-btn-cls {
      min-height: initial;
      padding: 6px 24px;
      // margin: 110px 10px 110px 10px;
      background: transparent;
      color: #fff;
      border-color: #fff;

      &:hover {
        background: #fff;
        color: #409eff;
        border-color: #409eff;
      }
      &:active {
        background: #fff;
        color: #3a8ee6;
        border-color: #3a8ee6;
      }
    }
  }

  .pre-pic-qr {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: #fff;

    img {
      position: relative;
      display: block;
      margin: 30px auto 0 auto;
      width: 120px;
      height: 120px;
      object-fit: cover;
    }
  }
}

.produ-handle {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 82px;

  background: #fff;
  z-index: 2;
  transition: height 0.3s ease-in-out;
  // overflow: hidden;

  .produ-handle-title {
    position: relative;
    display: flex;
    align-items: center;
    height: 45px;

    p {
      flex: 1;
      padding: 2px 0;
      margin: 0 12px;
      border-bottom: 1px solid #edeff2;
      color: #43475c;
      font-size: 13px;
      word-break: break-all;
      -webkit-line-clamp: 2;
    }
  }

  .produ-handle-type {
    position: relative;

    p {
      margin: 0 10px;
      height: 37px;
      line-height: 37px;

      color: #127bff;
      font-size: 12px;

      span {
        float: left;
      }

      b {
        float: right;
        font-weight: normal;
        color: #a5afbe;
      }
    }
  }

  .produ-handle-btn {
    position: relative;
    margin: 10px 12px 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:hover {
      z-index: 1;
    }

    .handle-btn-qr {
      padding: 3px 20px 3px 3px;

      i {
        display: block;
        font-size: 18px;
        color: #43475c;
      }
    }
    .handle-btn-qr-active {
      i {
        color: #127bff;
      }
    }

    .handle-btn-others {
      position: relative;
      padding: 8px;

      .btn-oth {
        padding: 4px 20px;
        font-size: 14px;
        border: 1px solid #43475c;
        border-radius: 2px;
        color: #43475c;
      }

      .btn-others-box {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        padding: 0 10px;

        background: #fff;

        .btn-others {
          display: block;
          width: 100%;
          padding: 8px 0;
          margin: 0;
          text-align: left;

          font-size: 12px;
          color: #43475c;

          i {
            margin-right: 6px;
          }
        }
        .btn-others:disabled {
          color: #aaa;
        }
        .btn-delete {
          border-top: 1px solid #edeff2;
        }
        .btn-line {
          margin-top: 10px;
          border-top: 1px solid #edeff2;
        }
        .inverted-tri {
          position: absolute;
          width: 10px;
          height: 10px;
          bottom: -8px;
          left: 50%;
          transform: rotateZ(45deg) translateX(-50%);
          background: #fff;
        }
      }
    }
    .handle-btn-others-active {
      .btn-oth {
        color: #fff;
        background: #127bff;
        border-color: #127bff;
      }
    }
  }
}
.produ-handle-active {
  height: 140px;
}

.produ-status {
  position: absolute;
  top: 0;
  left: 0;
  background: #a5afbe;
  border-radius: 0 0 10px 0;
  z-index: 3;

  p {
    margin: 0;
    padding: 3px 8px;
    font-size: 12px;
    color: #fff;
  }
}
.is-online {
  display: none;
}

.blur {
  // filter: url(@images/blur.svg#blur); /* FireFox, Chrome, Opera */

  -webkit-filter: blur(10px); /* Chrome, Opera */
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);

  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}

.produ-tag {
  position: absolute;
  top: 0;
  width: 100%;
  height: 0;

  &:hover {
    z-index: 2;
  }
}
</style>
